<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;color: yellow;font-size: 30px;}
    </style>
</head>
<body>
    <div class="box" style="background:red;border: solid 10px black">hello</div>
</body>
<script>
    var obox = document.querySelector(".box")

    // 行内样式操作
    // 获取
    // console.log(obox.style);
    // console.log(obox.style.background);
    // console.log(obox.style.border);

    // 修改
    // obox.style.background = "green";
    // obox.style.padding = "30px";

    // 删除（修改为默认）
    // obox.style.padding = "";

    // 行内操作只能操作行内
    // console.log(obox.style.width);
    // console.log(obox.style.height);
    // console.log(obox.style.color);

    // =========

    // 非行内：只能获取，不能修改
    // console.log(getComputedStyle(obox));
    // console.log(getComputedStyle(obox).width);
    // console.log(getComputedStyle(obox).height);
    // console.log(getComputedStyle(obox).color);
    // 非行内操作不仅能获取非行内，还能获取行内
    // console.log(getComputedStyle(obox).border);

    // 不能设置
    // getComputedStyle(obox).width = "200px";

    // =========
    // 非行内样式的兼容处理：
    // 借助浏览器不支持这个属性时，获取到的是undefined，解决兼容问题

    function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele)[attr];
        }
    }

    console.log(getStyle(obox, "width"));
    console.log(getStyle(obox, "height"));
    console.log(getStyle(obox, "color"));
    console.log(getStyle(obox, "font-size"));
    console.log(getStyle(obox, "background-color"));

    // obox.style.fontSize = "40px";
    // obox.style["font-size"] = "50px";
</script>
</html>